<template>
  <a-card>
    <div class="search-area">

    </div>
    <div class="table-operator">
      <a-space>
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      </a-space>
    </div>
    <div class="table-area">
      <a-table
        ref="roleTable"
        :columns="role.columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
         <span slot="action" slot-scope="text, record">
           <a-tag color="#2db7f5" @click="handleEdit(record)">编辑</a-tag>

           <a-popconfirm ok-text="确认" cancel-text="取消" @confirm="handleDel(record)">
             <template slot="title">
               确认删除角色{{ record.roleName }}吗？
             </template>
             <a-tag color="red">删除</a-tag>
           </a-popconfirm>

        </span>
      </a-table>
    </div>
    <role-modules ref="modalForm" @ok="modalFormOk" ></role-modules>
  </a-card>
</template>

<script>
import moment from "moment";
import { TableListMixin } from "@/mixins/TableListMixin";
import RoleModules from "@views/user/modules/RoleModules";

export default {
  name: "RoleList",
  mixins:[TableListMixin],
  components: {
    RoleModules,
  },
  data(){
    return {
      role: {
        columns: [
          {
            title: '角色编码',
            align: 'center',
            dataIndex: 'roleCode'
          },
          {
            title: '角色名称',
            align: 'center',
            dataIndex: 'roleName'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align:"center",
            sorter: true,
            customRender: (text) => {
              return moment(text).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            scopedSlots: { customRender: 'action' },
          },
        ],
      },
      url: {
        list: '/role/pageList',
        delete: '/role/delete',
      }
    }
  },
  methods: {


  }
}
</script>

<style scoped>

</style>
